import React, { Component } from 'react';
import "./Model2.css"
class Model2 extends Component {
  constructor(props){
    super(props)
    this.state={
      song:[{name:"华语男"},{name:"华语女"},{name:"华语组合"},{name:"欧美男"},{name:"欧美女"},{name:"欧美组合"},{name:"日本男"},{name:"日本女"},{name:"日本组合"},{name:"韩国男"},{name:"韩国女"},{name:"韩国组合"},{name:"其他男歌手"},{name:"其他女歌手"},{name:"其他组合"}],
      zimu:[{name:"A"},{name:"B"},{name:"C"},{name:"D"},{name:"E"},{name:"F"},{name:"G"},{name:"H"},{name:"I"},{name:"J"},{name:"K"},{name:"L"},{name:"M"},{name:"N"},{name:"O"},{name:"P"},{name:"Q"},{name:"R"},{name:"S"},{name:"T"},{name:"U"},{name:"V"},{name:"W"},{name:"X"},{name:"Y"},{name:"Z"}],
      songsing:[]
    }
  }
  render() {
    return (
      <div>
        <div className="S-all">
          <div className="S-geshou"><span className="S-geshous S-geshouss">分类(默认热门):</span>{this.state.song.map((item,index)=><span key={index} className="S-geshous">{item.name}</span>)}</div>
          <div className="S-geshou">
            <span className="S-geshous S-geshouss">首字母:</span>
            {this.state.zimu.map((item,index)=><span key={index} className="S-geshous">{item.name}</span>)}
          </div>
          {this.state.songsing.map((item,index)=>
          <div key={index} className="G-song">
            <div className="G-img"><div className="G-imgs"><img src={item.picUrl} alt="" /></div><div className="G-songname">{item.name}</div></div>
            
          </div>)}
        </div>
      </div>
    );
  }
  componentDidMount(){
    this.$axios([
      {
        url:"http://localhost:9115/top/artists?offset=0"
      }
    ]).then(res=>{
      this.setState({
        songsing:res[0].artists
      })
    }).catch(err=>console.log(err))
  }
}

export default Model2;